<template>
  <!--杂费  编辑  查看  新增页 共用-->
  <Card>
    <span style="font-weight: bold;font-size:18px;font-family: 微软雅黑;">杂费</span>
    <Form ref="formInline" :model="formDatas" :rules="ruleInline" style="width:1000px;margin:0px auto">
      <Row type="flex" align="middle" class="row-style">
        <Col span="3" class="row-col-style3">机构:</Col>
        <Col span="12" class="row-col-style2">
        <FormItem label="" class="form-style">
          <Select v-model="formDatas.organization" v-if="type==1||type==0">
            <Option v-for="item in orgList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span v-text="getOptionValue(orgList,formDatas.miscFeeName)" v-if="type==2"></span>
        </FormItem>
        </Col>
        <Col span="3" class="row-col-style3">描述:</Col>
        <Col span="6" class="row-col-style2">
        <FormItem label="" prop="miscFeeName" class="form-style">
          <Input v-model="formDatas.miscFeeName" placeholder="请输入" v-if="type==1||type==0"></Input>
         <span v-text="formDatas.miscFeeName" v-if="type==2"></span>
        </FormItem>
        </Col>
      </Row>

      <Row type="flex" align="middle" class="row-style">
        <Col span="3" class="row-col-style3">费用类型:</Col>
        <Col span="12" class="row-col-style2">
        <FormItem label="" class="form-style">
          <Select v-model="formDatas.feeType" v-if="type==1||type==0">
            <Option v-for="item in feeTypeData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span v-text="getOptionValue(feeTypeData,formDatas.feeType)" v-if="type==2"></span>
        </FormItem>
        </Col>
        <Col span="3" class="row-col-style3">收取方式:</Col>
        <Col span="6" class="row-col-style2">
        <FormItem label="" class="form-style">
          <Select v-if="type==1||type==0" v-model="formDatas.chargeMethod">
            <Option v-for="item in chargeMethodData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span v-text="getOptionValue(chargeMethodData,formDatas.chargeMethod)" v-if="type==2"></span>
        </FormItem>
        </Col>
      </Row>

      <Row type="flex" align="middle" class="row-style">
        <Col span="3" class="row-col-style3">基本费用:</Col>
        <Col span="12" class="row-col-style2">
        <FormItem label="" prop="baseFee" class="form-style">
          <Input v-model="formDatas.baseFee" placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.baseFee" v-if="type==2"></span>
        </FormItem>
        </Col>
        <Col span="3" class="row-col-style3">最低费用:</Col>
        <Col span="6" class="row-col-style2">
        <FormItem prop="minFee" class="form-style">
          <Input v-model="formDatas.minFee" placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.minFee" v-if="type==2"></span>
        </FormItem>
        </Col>
      </Row>

      <Row type="flex" align="middle" class="row-style">
        <Col span="3" class="row-col-style3">最高费用:</Col>
        <Col span="12" class="row-col-style2">
        <FormItem label="" prop="maxFee" class="form-style">
          <Input v-model="formDatas.maxFee" placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.maxFee" v-if="type==2"></span>
        </FormItem>
        </Col>
        <Col span="3" class="row-col-style3">费用百分比:</Col>
        <Col span="6" class="row-col-style2">
        <FormItem label="" prop="percentage" class="form-style">
          <Input v-model="formDatas.percentage" placeholder="请输入" v-if="type==1||type==0"></Input>
          <span v-text="formDatas.percentage" v-if="type==2"></span>
        </FormItem>
        </Col>
      </Row>

      <Row type="flex" align="middle" class="row-style">
        <Col span="3" class="row-col-style3">阶段方式:</Col>
        <Col span="12" class="row-col-style2">
        <FormItem label="" class="form-style">
          <Select v-model="formDatas.tierFlag" v-if="type==1||type==0">
            <Option v-for="item in tierFlagData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span v-text="getOptionValue(tierFlagData,formDatas.tierFlag)" v-if="type==2"></span>
        </FormItem>
        </Col>
      </Row>
      </br>
      </br>
      <table cellpadding="0" cellspacing="0" align="center" width="1000">
        <tbody>
          <tr>
            <td style="width: 15%;text-align: left;">
              &nbsp;
            </td>
            <td style="width: 32%;text-align: left;">
              百分比
            </td>
            <td style="width: 32%;text-align: left;">
              收取金额
            </td>
            <td style="width: 20%;text-align: left;">
              限额
            </td>
          </tr>
          <tr style="height:50px">
            <td style="width: 10%;text-align: left;vertical-align:middle">
              阶段1
            </td>
            <td style="text-align: left;">
              <!--<input type="text" name="phase1Percentage" v-if="type==1||type==0" value="0" v-model="formDatas.phase1Percentage" />-->
              <FormItem prop="phase1Percentage">
                <Input v-if="type==1||type==0" value="0" v-model="formDatas.phase1Percentage" size="small" placeholder="请输入.." style="width: 200px;"></Input>
                <span v-if="type==2">{{formDatas.phase1Percentage}}</span>
                <span v-if="type!=undefined"> </span>
              </FormItem>
            </td>
            <td style="text-align: left;">
              <FormItem prop="phase1Amount">
                <Input v-if="type==1||type==0" value="0" v-model="formDatas.phase1Amount" size="small" placeholder="请输入.." style="width: 200px;"></Input>
                <span v-if="type==2">{{formDatas.phase1Amount}}</span>
              </FormItem>
            </td>
            <td style="text-align: left;">
              <FormItem prop="phase1Limit">
                <Input v-if="type==1||type==0" value="0" v-model="formDatas.phase1Limit" size="small" placeholder="请输入.." style="width: 200px;"></Input>
                <span v-if="type==2">{{formDatas.phase1Limit}}</span>
              </FormItem>
            </td>
          </tr>
          <tr style="height:50px">
            <td style="width: 5%;text-align: left;">
              阶段2
            </td>
            <td style="text-align: left;">
              <FormItem prop="phase2Percentage">
                <Input v-if="type==1||type==0" value="0" v-model="formDatas.phase2Percentage" size="small" placeholder="请输入.." style="width: 200px;"></Input>
                <span v-if="type==2">{{formDatas.phase2Percentage}}</span>
                <span v-if="type!=undefined"> </span>
              </FormItem>
            </td>
            <td style="text-align: left;">
              <FormItem prop="phase2Amount">
                <Input v-if="type==1||type==0" value="0" v-model="formDatas.phase2Amount" size="small" placeholder="请输入.." style="width: 200px;"></Input>
                <span v-if="type==2">{{formDatas.phase2Amount}}</span>
              </FormItem>
            </td>
            <td style="text-align: left;">
              <FormItem prop="phase2Limit">
                <Input v-if="type==1||type==0" value="0" v-model="formDatas.phase2Limit" size="small" placeholder="请输入.." style="width: 200px;"></Input>
                <span v-if="type==2">{{formDatas.phase2Limit}}</span>
              </FormItem>
            </td>
          </tr>
          <tr style="height:50px">
            <td style="width: 5%;text-align: left;">
              阶段3
            </td>
            <td style="text-align: left;">
              <FormItem prop="phase3Percentage">
                <Input v-if="type==1||type==0" value="0" v-model="formDatas.phase3Percentage" size="small" placeholder="请输入.." style="width: 200px;"></Input>
                <span style="width: 200px;display:inline-block" v-if="type==2">{{formDatas.phase3Percentage}}</span>
                <span v-if="type!=undefined"> </span>
              </FormItem>
            </td>
            <td style="text-align: left;">
              <FormItem prop="phase3Amount">
                <Input v-if="type==1||type==0" value="0" v-model="formDatas.phase3Amount" size="small" placeholder="请输入.." style="width: 200px;"></Input>
                <span v-if="type==2">{{formDatas.phase3Amount}}</span>
              </FormItem>
            </td>
            <td>
              <br />
            </td>
          </tr>
        </tbody>
      </table>
      <br/>
      <br/>
      <Card>
        <Row v-if="type==1||type==0" style="text-align: center">
          <Button type="primary" @click="saveOrUpdate()">确定</Button>
          <Button type="primary" @click=resetForm style="margin-left: 15px;">重置</Button>
          <Button type="primary" @click="handleGoBack" style="margin-left: 15px;">返回</Button>
        </Row>
        <Row v-else style="text-align: center">
          <Button type="primary" v-show="formDatas.status == 9" @click="changeTypeToEdit()">编辑</Button>

          <Button type="primary" @click="handleGoBack">返回</Button>
        </Row>
      </Card>
    </Form>
  </Card>
</template>
<script>
const validateBaseFee = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的基本费用'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validateMinFee = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的最低费用'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validateMaxFee = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的最高费用'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePercentage = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的费用百分比'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePhase1Percentage = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的百分比'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePhase1Amount = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的收取金额'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePhase1Limit = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的限额'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}

const validatePhase2Percentage = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的百分比'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePhase2Amount = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的收取金额'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePhase2Limit = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的限额'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePhase3Percentage = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的百分比'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validatePhase3Amount = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的收取金额'))
  } else if (value.length > 15) {
    callback(new Error('输入参数过长'))
  } else {
    callback()
  }
}
const validateMiscFeeName = (rule, value, callback) => {
  if (value !== null && value.length > 15) {
    callback(new Error('输入参数过长'))
  } else if (value == null || value === '') {
    callback(new Error('描述不能为空'))
  } else {
    callback()
  }
}
export default {
  data () {
    return {
      $ajax: null,

      orgList: [{
        value: '100',
        label: '消费金融'
      }],
      defaultFormData: {},
      feeTypeData: [{
        value: 0,
        label: '固定'
      },
      {
        value: 1,
        label: '变动'
      },
      {
        value: 2,
        label: '阶段'
      }
      ],

      chargeMethodData: [{
        value: 0,
        label: '一次性收取'
      },
      {
        value: 1,
        label: '分期收取'
      }
      ],
      tierFlagData: [{
        value: 0,
        label: '金额'
      },
      {
        value: 1,
        label: '百分比'
      }
      ],

      // 绑定实体对象属性
      formDatas: {
        miscFeeId: null,
        organization: '100',
        miscFeeName: null,
        feeType: 0,
        baseFee: null, // 基本费用
        chargeMethod: 0, // 收取方式
        minFee: null,
        maxFee: null,
        percentage: null,
        tierFlag: 0,

        phase1Limit: null,
        phase1Amount: null,
        phase1Percentage: null,

        phase2Limit: null,
        phase2Amount: null,
        phase2Percentage: null,

        phase3Amount: null,
        phase3Percentage: null,
        status: null
      },
      type: 0, // 1 编辑   0 新增     2 查看
      ruleInline: {
        baseFee: [{
          validator: validateBaseFee,
          trigger: 'blur'
        }], // 基本费用
        minFee: [{
          validator: validateMinFee,
          trigger: 'blur'
        }], // 最低费用
        maxFee: [{
          validator: validateMaxFee,
          trigger: 'blur'
        }], // 最高费用
        percentage: [{
          validator: validatePercentage,
          trigger: 'blur'
        }], // 费用百分比
        phase1Percentage: [{
          validator: validatePhase1Percentage,
          trigger: 'blur'
        }], // 百分比
        phase1Amount: [{
          validator: validatePhase1Amount,
          trigger: 'blur'
        }], // 收取金额
        phase1Limit: [{
          validator: validatePhase1Limit,
          trigger: 'blur'
        }], // 限额
        phase2Percentage: [{
          validator: validatePhase2Percentage,
          trigger: 'blur'
        }], // 百分比
        phase2Amount: [{
          validator: validatePhase2Amount,
          trigger: 'blur'
        }], // 收取金额
        phase2Limit: [{
          validator: validatePhase2Limit,
          trigger: 'blur'
        }], // 限额
        phase3Percentage: [{
          validator: validatePhase3Percentage,
          trigger: 'blur'
        }], // 百分比
        phase3Amount: [{
          validator: validatePhase3Amount,
          trigger: 'blur'
        }], // 收取金额
        miscFeeName: [{
          validator: validateMiscFeeName,
          trigger: 'blur'
        }]
      } // 校验规则
    }
  },
  created () {
    this.$ajax = this.$util.ajax(this.$appContext.marvels_core_product)
    this.initPage()
  },
  computed: {
    path () {
      return this.$route.path
    },

    index () {
      return this.$route.query.index
    }
  },
  mounted () { },
  methods: {
    // 返回上一页
    handleGoBack () {
      this.$router.back()
    },

    handleRouterGo (path) {
      this.$router.push(path)
    },

    changeTypeToEdit () {
      this.type = 1
    },

    // 通用获取下拉框的文本信息
    getOptionValue (optionArray, keyValue) {
      for (var i = 0; i < optionArray.length; i++) {
        if (optionArray[i].value !== keyValue) {
          return optionArray[i].label
        }
      }
      return ''
    },

    initPage () {
      var type = this.$route.query.type
      this.type = type
      if (type !== 1 || type !== 2) {
        const vm = this
        vm.$ajax.get(vm.$appContext.marvels_core_product + '/product/param/miscfee/service/getKey/' + vm.index).then(re => {
          var data = re.data
          vm.formDatas = data.data
          this.defaultFormData = JSON.parse(JSON.stringify(vm.formDatas))
        }).catch(er => {

        })
      }
    },

    saveOrUpdate () {
      const vm = this
      this.$refs.formInline.validate(valid => {
        if (valid) {
          var params = vm.formDatas
          if (vm.type === 0) {
            // 保存

            this.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/miscfee/service/save', params).then(re => {
              var data = re.data
              var code = data.code
              var message = data.message
              if (code !== 'success') {
                this.$Message.warning(message)
                return
              }
              this.$Message.success('添加成功')
              // 返回列表页
              vm.$router.push({
                name: 'miscFee'
              })
            }).catch(er => {

            })
          } else {
            // 更新
            this.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/miscfee/service/update', params).then(re => {
              var data = re.data
              var code = data.code
              var message = data.message
              if (code !== 'success') {
                this.$Message.warning(message)
                return
              }
              this.$Message.success('更新成功')
              // 返回列表页
              vm.$router.push({
                name: 'miscFee'
              })
            }).catch(er => {
            })
          }
        }
      })
    },
    deleteBykey () {
      var param = {
        miscFeeId: this.$route.query.index
      }
      this.$ajax.post(this.$appContext.marvels_core_product + '/product/param/miscfee/service/delete', param).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.success(message)
        } else {
          this.$Message.warn(data.data)
        }
        // 返回列表页
        this.$router.push({
          name: 'miscFee'
        })
      }).catch(er => {
      })
    },
    resetForm () {
      this.formDatas = JSON.parse(JSON.stringify(this.defaultFormData))
    }
  },
  props: {},
  watch: {
    $route (val) { }
  }
}
</script>

<style lang="less">
@import '../../../styles/common.less';
@import '../../../styles/table.less';
.row-col-style {
  color: #2d8cf0;
  font-family: 微软雅黑;
  font-size: 20px;
  text-align: right;
}
.row-col-style3 {
  text-align: left;
}
.row-col-style2 {
}
.form-style {
  width: 248px;
}
.ivu-form-item {
  margin-bottom: 0px;
}
.row-style {
  margin-top: 30px;
}
</style>
